import { useState } from 'react'

export const day01_12 = function () {
    const [count, setCount] = useState(0)
    const getCountSon1 = (countSon1: any) => {
        setCount(countSon1)
    }
    return (
        <>
            <h3>day01_12</h3>
            <Son1 onGetCount={getCountSon1} />
            <Son2 count={count} />
        </>
    )
}

function Son1(props: any) {
    const [countSon1, setCountSon1] = useState(0)
    return (
        <>
            <h3>Son1</h3>
            <div>{countSon1}</div>
            <div>
                <button onClick={() => setCountSon1(countSon1 + 1)}>countSon1++</button>
                <br />
                <button onClick={() => props.onGetCount(countSon1)}>SendCount</button>
            </div>
        </>
    )
}

function Son2(props: any) {
    return (
        <>
            <h3>Son2</h3>
            <div>{props.count}</div>
        </>
    )
}
